import { Frame } from "@composites/Frame";
import { Debugger } from "@composites/DevTools";
import { createRoot } from "react-dom/client";
import { useEffect } from "react";
import { ShortcutLock } from "@composites/ShortcutLock";
import { RootViewPort } from "@composites/RootViewport";


function FunctionFeature() {
    console.log('FunctionFeature');
    return 1
}
function ComponentReact({ children }: { children: React.ReactNode }) {
    return <div>
        components1
        {children}
    </div>
}
createRoot(document.getElementById('root')!).render(
    <Frame
        features={[RootViewPort,FunctionFeature,Debugger]}
    >
        <div>
            <div>Test Application</div>
            <div>Test Application</div>
            <div 
                style={{
                    height:200,
                    width:300,
                }}
            >
                <div>1Test Application</div>
                <div>2Test Application</div>
            </div>
            <ComponentReact children={
                <>
                    <div>3Test Application</div>
                    <div>4Test Application</div>
                </>
            } />
                <div>Test Application</div>
            <div>Test Application</div>
        </div>
    </Frame>
)